<template>
  <div class="container">
    <el-container>
      <el-main>
        <div class="div2">
          <div class="div2Item">
            <span class="span1">{{$t('eDRF.CurrentPrice')}}（USDT）</span>
            <span class="span2">456.00</span>
            <div class="spanDiv">
              <span>{{$t('eDRF.GoPurchasing')}}</span>
            </div>
          </div>
          <div class="div2Item">
            <span class="span1">{{$t('eDRF.AccumulatedIssuance')}}</span>
            <span class="span2">123,456.00</span>
            <span class="span3">&nbsp;</span>
          </div>
          <div class="div2Item">
            <span class="span1">{{$t('eDRF.AccumulatedDestroyedAmount')}}</span>
            <span class="span2">123,456.00</span>
            <span class="span3">&nbsp;</span>
          </div>
        </div>
        <p class="hisP">{{$t('eDRF.IssuanceDestroyRecord')}}</p>
        <div class="tableDiv">
          <template>
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              :header-cell-style="{
                background: '#212432',
                color: '#505363',
                border: '0px solid #2f3241',
                fontSize: '15px'
              }"
              :cell-style="{
                background: '#2f3241',
                border: '0px ',
                 fontSize: '13px'
              }"
            >
              <el-table-column prop="date" :label="$t('eDRF.Time')"> </el-table-column>
              <el-table-column prop="name" :label="$t('eDRF.Volume')">
              </el-table-column>
              <el-table-column prop="address" :label="$t('eDRF.Type')"> </el-table-column>
              <!-- "Issue":"发行","Destroy":"销毁", -->
              <el-table-column prop="address" :label="$t('eDRF.ExecutionAddress')"> </el-table-column>
            </el-table>
          </template>
        </div>
      </el-main>
      <el-footer>
        <el-pagination background layout="prev, pager, next" :total="100">
        </el-pagination>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: " 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: " 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: " 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: " 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: " 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: " 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: " 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: " 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: " 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: " 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: " 1519 弄"
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.gutter{
  display: block !important;
}
.container{
  max-width: 1107px;
}
.el-table::before,
.el-table--group::after,
.el-table--border::after {
  content: "";
  position: absolute;
  background-color: #2f3241 !important;
}
.el-main {
  // height: 912px;
  background: #13141f;
  overflow: hidden;
  padding-top: 0;
  .div2 {
    height: 170px;
    width: 100%;
    margin-bottom: 28px;
    display: flex;
    .div2Item {
      width: 430px;
      height: 160px;
      background: #282b3b;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      margin: 0 10px 10px 10px;
      .span1 {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 22px;
        color: #b0b7d6;
        opacity: 1;
      }
      .span2 {
        font-size: 30px;
        font-family: DINbek Bold;
        font-weight: bold;
        line-height: 44px;
        color: #ffffff;
      }
      .span3 {
        font-size: 12px;
        font-family: PingFang HK;
        font-weight: 400;
        line-height: 20px;
        color: #b0b7d6;
        opacity: 1;
      }
      .spanDiv {
        // width: 100px;
        padding: 0 20px !important;
        height: 30px;
        background: #454233;
        line-height: 30px;
        text-align: center;
        span {
          color: #fae248;
        }
      }
    }
  }
  .hisP {
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    line-height: 25px;
    color: #e2e4ee;
  }
  .tableDiv {
    height: 545px;
    background: #2f3241;
  }
}
.el-footer {
  height: 43px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
